<template>
	<view class="register_content">
		<!-- <view style="padding: 10px 0 0 5px;">
			<img src="../../static/返回键.png" style="width: 25px;height: 25px;color:white">
		</view> -->
		<view class="register_container">
			<view class="register_top">
				漫研社
			</view>
			<view class="register_inputs">
				<u--input
					placeholder="昵称"
					prefixIcon="account-fill"
					prefixIconStyle="font-size: 22px;color: #909399;"
					shape="circle"
					customStyle="background-color: white;height:30px"
					v-model="username"
				></u--input>
				<u--input
					placeholder="手机号"
					prefixIcon="phone-fill"
					prefixIconStyle="font-size: 22px;color: #909399;"
					shape="circle"
					customStyle="background-color: white;height:30px;margin-top:25px"
					v-model="mobile"
				></u--input>
				<u--input
					placeholder="密码"
					prefixIcon="lock-fill"
					prefixIconStyle="font-size: 22px;color: #909399;"
					shape="circle"
					customStyle="background-color: white;height:30px;margin-top:25px"
					:password="true"
					v-model="password"
				></u--input>
				<u--input
					placeholder="确认密码"
					prefixIcon="lock-fill"
					prefixIconStyle="font-size: 22px;color: #909399;"
					shape="circle"
					customStyle="background-color: white;height:30px;margin-top:25px"
					:password="true"
					v-model="password2"
				></u--input>
				<view class="register_tip">
					<view class="register_register" @click="go_login">
						登录
					</view>
					<view style="color:red" v-show="isShow">
						{{error_tip}}
					</view>
				</view>
				<view class="register_bt">
					<u-button type="primary" text="注册" shape="circle" class="bt" @click="register"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../api/config.js'
	export default {
		data() {
			return {
				username: '',
				mobile: '',
				password: '',
				password2: '',
				error_tip: '',
				isShow: false
			}
		},
		methods: {
			go_login() {
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			register() {
				// 手机测试，mobile:13456789102
				let re = /^1[3-9]\d{9}$/
				if(this.username && this.mobile && this.password && this.password2){
					if(this.mobile.length != 11 || !re.test(this.mobile)){
						this.error_tip = '请输入正确的手机号'
						this.isShow = true
						return
					}
					if(this.password!=this.password2){
						this.error_tip = '两次密码不一致'
						this.isShow = true
						return
					}
					if(this.password.length<6){
						this.error_tip = '密码长度不能小于6'
						this.isShow = true
						return
					}
					if(this.password.length>18){
						this.error_tip = '密码长度不能大于18'
						this.isShow = true
						return
					}
					uni.request({
						url:api + '/register/',
						method:'POST',
						data:{
							username: this.username,
							password: this.password,
							mobile: this.mobile
						},
						success:res=>{
							if(res.data.state=='OK'){
								uni.setStorageSync('username', this.username)
								uni.switchTab({
									url:'/pages/index/index'
								})
							}else{
								this.error_tip = res.data.tip
								this.isShow = true
								return
							}
						}
					})
				}else{
					this.error_tip = '请输入完整信息'
					this.isShow = true
					return
				}
			}
		}
	}
</script>

<style>
	.register_content{
		min-height: 100vh;
		height: auto;
		width: 100%;
		background-image: url('@/static/loginbck.jpg');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		/* padding-top: 50px; */
	}
	.register_container{
		padding: 10px 40px 20px 40px;
	}
	.register_top{
		width: 100%;
		font-size: 25px;
		font-weight: 700;
		text-align: center;
		padding-top: 50px;
		color: white;
		margin-top: 50px;
	}
	.register_inputs{
		margin-top: 80px;
	}
	.register_tip{
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
		padding: 0 10px 0 10px;
	}
	.register_tip view{
		font-size: 13px;
		color: gray;
	}
	.register_bt{
		margin-top: 30px;
	}
	.bt{
		border: none;
		background: linear-gradient(90deg, #85e9e2 3%, #e79bee 97%);
		box-shadow: 0px 2px 10px 0px rgba(0, 172, 153, 0.4);
	}
</style>
